<template>
  <div class="">
    <van-address-edit
      :area-list="areaList"
      show-postal
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
    <!-- :area-list 省市区选择列表 show-postal是否显示邮政编码
    area-columns-placeholder 省市区选择的占位符 save点击保存时候事件-->
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { areaList } from "@vant/area-data";
//引入省市区的数据 用的是vant默认的数据 要先安装
import { addAdress } from "../../utils/shopcar.js";
//引入添加地址的接口
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});
    const onSave = (val) => {
      // console.log(val);
      let provinceId = val.areaCode.slice(0, 2).padEnd(6, 0);
      //slice 截取字符串 从0开始截取两位  padend是在末尾补全  第一个参数6代表 要补全为6位第二个参数 0是拿0来补
      let cityId = val.areaCode.slice(0, 4).padEnd(6, 0);
      // console.log(provinceId, cityId);
      // 因为这里用的添加地址是vant的组件 所以返回的是一个省市区和在一起的编码 那么按照中国城市编码的规则
      // 拿到这个编码 截取前两位 补四个0 就是省份的id 拿到编码的前四位 补两个0 那么就是城市的id

      addAdress({
        provinceId,
        cityId,
        address: val.addressDetail,
        code: val.postalCode,
        linkMan: val.name,
        mobile: val.tel,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          router.push("/addresslist");
        }
      });
    };
    return { ...toRefs(data), areaList, onSave };
  },
};
</script>

<style lang="scss"></style>
